<template>
  <div class="all">
    <table width="100%" cellspacing="0">
      <thead>
        <tr>
          <th width="10px"></th>
          <th width="40px">等级ID</th>
          <th width="150px">分类名称</th>

          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(val,name) in list">
          <td></td>
          <td><input type="text" size="3"  v-model="val.levelId"></td>
          <td><input type="text" style="width: 120px;"  v-model="val.name"></td>
          <td></td>
        </tr>

        <tr>
        <td>增加</td>
          <td><input type="text" size="3" v-model="add.levelId"></td>
          <td><input type="text" style="width: 120px;" v-model="add.name"></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <button @click="submit()">保存</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        add:{
          levelId:'',
          name:'',
          min:'',
          max:''
        },
        list:[
        ],
      }
    },
    methods:{
      submit(){
        this.list.push(this.add)
        console.log(this.list)
      }
    }
  }
</script>

<style scoped>
th{
      height: 30px;
      background: #eef3f7;
      border-bottom: 1px solid #d5dfe8;
      font-weight: normal;
}
td{
  border-bottom: #eee 1px solid;
      padding-top: 5px;
      padding-bottom: 5px;
}
td input{
margin: auto;
display: block;
text-align: center;
box-shadow:0 0 0 0 rgba(238,238,238,0.5)
}
</style>
